import getIn from '../../../sdk/utils/getIn';
import {API_SAVE_FORMID} from "../../../sdk/business/url";
/* 此插件必传参数menuItems和currentIndex，_width为选填，当menuItems每个菜单宽度大于屏幕宽度，自动添加滚动和下拉菜单 */
Component({
    options: {
        multipleSlots: true, // 启用多slot支持
    },
    properties: {
        menuItems: {// 导航列表
            type: Array,
            value: undefined,
            observer(newVal, oldVal) {
                if (newVal && newVal.length != oldVal.length) {
                    this.setWidth(newVal);
                }
            }
        },
        currentIndex: {// 当前选中id
            type: Number,
            value: 0,
            observer(newVal, oldVal) {
              if (newVal != oldVal) {
                this.setData({ toView: `scroll${newVal}` });
                }
            },
        },
        disableDown: {// 关闭下拉菜单
            type: Boolean,
            value: false,
        },
        _width: {// 每个导航元素宽度
            type: String,
            value: '20vw',
        },
        _position: {// 导航条定位
            type: String,
            value: 'fixed',
        },
        _color: {// 单个元素颜色
            type: String,
            value: '#fc6a57',
        },
        name: {
            // 自定义字段名
            type: String,
            value: 'name',
        },
    },
    data: {
        scroll: false,
        menuShow: false,
        animationData: {},
        barHeight: 0,
        toView: '',
    },
    ready() {
        let callSum = 0;
        const len = this.data.menuItems.length;
        if (len % 3 != 0) {
            callSum = parseInt(len / 3) + 1;
        } else {
            callSum = parseInt(len / 3);
        }
        const barHeight = 45 * callSum + 30;
        this.setData({ barHeight });
      // this.setWidth(this.data.menuItems);
    },
    methods: {
        setWidth() {
            const window_width = wx.getSystemInfoSync().windowWidth;
            const query = wx.createSelectorQuery().in(this);
            setTimeout(() => {
                query.selectAll('.menuItems').boundingClientRect((res) => {
                    const readWidth = res.length > 0 ? res.reduce((total, value) => total + value.width, 0) : 0;
                    if (readWidth > window_width) {
                        this.setData({
                            scroll: true,
                        });
                    }
                }).exec();
            }, 1);
        },
        navbarTap(e) {
            const currentIndex = getIn(e, ['currentTarget', 'dataset', 'idx']);
            const form_id = getIn(e.detail, ['formId']);
            const token = wx.getStorageSync('token');
            const toView = `scroll${currentIndex}`;
            if (!this.data.menuItems || getIn(this.data, ['menuItems', 'size']) == 0) {
                return;
            }
            if (this.data.menuShow) {
                this.hideModal();
            }
            global.request(API_SAVE_FORMID, { form_id, token })
            this.setData({ toView });
            this.triggerEvent('menuCallBackAction', currentIndex);
        },
        menuList() {
            this.showModal();
        },
        // changeView() {

        // }
        /** 弹出优惠券弹窗* */
        showModal() {
            this.timers && clearTimeout(this.timers);
            const animation = wx.createAnimation({
                duration: 200,
                timingFunction: 'linear',
                delay: 0,
            });
            this.animation = animation;

            animation.translateY(-this.data.barHeight).step();
            this.setData({ animationData: animation.export(), menuShow: true });
            this.times = setTimeout(() => {
                animation.translateY(0).step();
                this.setData({
                    animationData: animation.export(),
                });
            }, 200);
        },
        // 取消弹出框
        hideModal() {
            this.timers && clearTimeout(this.timers);
            const animation = wx.createAnimation({
                duration: 200,
                timingFunction: 'linear',
                delay: 0,
            });
            this.animation = animation;
            animation.translateY(-this.data.barHeight).step();
            this.setData({ animationData: animation.export() });
            this.times = setTimeout(() => {
                animation.translateY(0).step();
                this.setData({
                    animationData: animation.export(),
                    menuShow: false,
                });
            }, 200);
        },
    },

});
